<template>
	<view class="container">
		<img class="bg-img" src="@appstatic/img/my/bg-img.jpg" alt="">
		<z-paging :style="'height:'+contentHeight+'px;position:fixed;top:40px;margin-top: '+myBarHeight+'px;'"
			ref="paging" v-model="list" @query="queryList" :fixed="true" :auto="true" :hide-empty-view='true'>
			<view class="search" slot="top" :style="'top:'+myBarHeight+'px;'">
				<u-search class="uni-input" placeholder="搜索经销商" shape="square" :showAction="true" actionText="取消"
					v-model="insertName" @custom="cancel" @search="search" @clickIcon="search" @change="search"></u-search>
			</view>
			<view class="result">
				<view class="row" v-for="(item,index) in list" @click="choose(item)">
					<view class="franchiser-name">{{item.storeName}}</view>
					<view class="franchiser-address">{{item.storeAddress}}</view>
				</view>
			</view>
		</z-paging>

		<view v-if="list.length==0" class="result" style="background-color: #f5f5f5;">
			<view class="notfound">
				<span>未找到匹配的经销商</span>
			</view>
		</view>

		<clxDialog :isShow='diolog.show' :title="diolog.title" :content="diolog.dialogContent"
			@dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel'>
		</clxDialog>
	</view>
</template>

<script>
	const app = getApp();
	const network = require("@manager/network-manager.js");
	import clxDialog from "../../components/clx-dialog/clx-dialog";
	export default {
		components: {
			clxDialog,
		},
		data() {
			return {
				pagination: {
					loadMore: true,
					page: 1,
					totalPage: 1,
					limit: 15,
					length: 100
				},
				searchContent: '',
				list: [],
				diolog: {
					show: false,
					title: '选择确认',
					dialogContent: '请正确选择车辆对应的经销商与零售商信息，以免对后期维保、售后服务产生影响。'
				},
				navigationBarHeight: app.globalData.navigationBarHeight,
				myBarHeight: 0,
				contentHeight: app.globalData.windowHeight - app.globalData.navigationBarHeight - 40,
				searchHeight: uni.upx2px(40),
				insertName: '',
				transferData: {},
			}
		},
		onShow: function(options) {
			// #ifdef H5
			this.myBarHeight = this.navigationBarHeight
			// #endif

		},
		methods: {
			queryList(pageNo, pageSize) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_GET_STORESEARCH;
				var params = {
					"pageNum": pageNo,
					"pageSize": pageSize,
					"storeName": that.insertName
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						var _list = res.data.list;
						this.$refs.paging.complete(_list);
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					console.error(res)
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			search() { //点击搜索键
				this.$refs.paging.reload();
			},
			choose(item) { //选择，弹出确认选择\

				var that = this
				var uri = app.globalData.config.interfaces.URL_GET_STOREDEATAIL
				var params = {
					"uuid": item.uuid,
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {

						that.transferData = res.data
						that.transferData.cityName = item.cityName
						//++++客户需求不弹弹窗了，直接回到上一页面+++
						// that.diolog.show = true
						var prePage = that.$util.prePage()
						prePage.getStoreNameData(that.transferData);
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}) //.catch();

			},
			dialogConfirm() { //确定选择
				this.diolog.show = false;
				// uni.$emit("method", this.transferData);
				var prePage = this.$util.prePage()
				prePage.getStoreNameData(this.transferData);
				uni.navigateBack({
					delta: 1
				});

			},
			dialogCancel() { //取消选择
				this.diolog.show = false
			},
			cancel() { //取消搜索，清空搜索内容
				this.insertName = '',
					this.$refs.paging.reload();
			},

		}
	}
</script>
<style scoped>
	.container {}

	.bg-img {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.search {
		height: 40px;
		position: fixed;
		top: 0;
		z-index: 900;
		width: 100%;
	}

	.uni-input {
		padding: 0px 0px 0px 16px;
		min-width: 0;
		flex: 1;
	}

	.cancel {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 58px;
		height: 36px;
	}

	.result {
		display: flex;
		flex-direction: column;
		padding-left: 24px;
		padding-right: 24px;
	}

	.row {
		height: 54px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 10px 0px 10px 0px;
		border-bottom: solid #EDEDED 1px;
	}

	.franchiser-name {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 32upx;
		line-height: 140%;
		letter-spacing: -0.5px;
		color: #3D3A3A;
	}

	.franchiser-address {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 140%;
		letter-spacing: -0.5px;
		color: #ADB0AE;
	}

	.notfound {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 32px;
		font-style: normal;
		font-weight: 400;
		font-size: 28upx;
		line-height: 20px;
		color: #EA5404;
		background-color: #f5f5f5;
		margin-top: 20px;
	}
</style>
